﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
    <link rel="stylesheet" href="/html/lvyoule_11_10/dingpiao/css/dinggpiao.css">
    <meta name="Robots" content="index,follow,NOODP">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="cache-control" content="no-cache">
</head>
<body ryt12806="1">
<div id="app"><!--搜索模块-->
    <div id="js_searchbox" class="b_cgy_sch clrfix">

        <div class="e_csh_cgy">
            <ul id="js_nva_cgy" class="nav_cgy">
                <li data-for="flight" class="c_flight js-searchnav"><a @click="scenic(-10)">TOP热点
                </a></li>
                <li v-for="theme in themes" data-for="hotel" class="c_hotel js-searchnav">
                    <a @click="scenic(theme.code)">{{theme.name}}
                    </a></li>
            </ul>
        </div>
        <div class="e_csh_sch" id="content">
            <div class="js-searchbox-panel e_csh_sch_fl" id="js_searchbox_flight" v-if="isShow1">
                <div class="e_csh_sch_flpn">
                    <div class="hot_menpiao">
                        <dl v-for="book in books">
                            <dt><a target="_blank" :href="'../yuding/yuding.html?scid='+book.id"><img :src="book.scover"
                                                                                                      border="0"/></a>
                            </dt>
                            <dd><span>乐乐价：<em>￥{{book.dprice}}</em></span><a
                                    :href="'../yuding/yuding.html?scid='+book.id">{{book.name}}</a></dd>
                        </dl>
                    </div>
                </div>
            </div>


            <div v-if="isShow2" class="js-searchbox-panel e_csh_sch_h js-transition-before js-transition-after"
                 id="js_searchbox_hotel">
                <div class="hot_menpiao">
                    <dl v-for="book in boombox">
                        <dt><a target="_blank" :href="'../yuding/yuding.html?scid='+book.id"><img :src="book.scover"/></a></dt>
                        <dd><span>乐乐价：<em>￥{{book.dprice}}</em></span><a target="_blank" :href="'../yuding/yuding.html?scid='+book.id">{{book.name}}</a>
                        </dd>
                    </dl>
                </div>
                <div class="ch_tus_spot">
                    <ul class="ul_cgy_tuan dotline">
                        <li class="clrfix"><b class="lab">特价门票</b>
                            <div class="catalist listheight">
                                <span><a target="_blank" href="">登封少林寺</a></span>
                                <span><a target="_blank" href="">新乡八里沟</a></span>
                                <span><a target="_blank" href="">栾川重渡沟</a></span>
                                <span><a target="_blank" href="">重渡沟风景区</a></span>
                                <span><a target="_blank" href="">河南栾川老君山</a></span>
                                <span><a target="_blank" href="">竹林长寿山景区</a></span>
                                <span><a target="_blank" href="">新乡南太行-八里沟景</a></span>
                                <span><a target="_blank" href="">新乡南太行-万仙山景</a></span>
                                <span><a target="_blank" href="">开封东京极地海洋馆</a></span>
                                <span><a target="_blank" href="">南阳云露山景区</a></span>
                                <span><a target="_blank" href="">郑州方特欢乐世界</a></span>
                                <span><a target="_blank" href="">大宋武侠城</a></span>
                                <span><a target="_blank" href="">南阳云露山景区</a></span>
                                <span><a target="_blank" href="">点点梦想城</a></span>
                                <span><a target="_blank" href="">郑州海洋馆</a></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div v-if="isShow3" class="js-searchbox-panel" id="js_searchbox_tuan">
                <div class="hot_menpiao">

                    <div class="ch_dwd_tit"><a target="_blank" href="">下载客户端</a></div>
                    <div class="tab_phone_con">
                        <dl>
                            <dt class="list_tit">手机号码</dt>
                            <dd class="list_con listPhone">
                                <input type="text" value="请输入您的手机号码" maxlength="11" class="input02" id="searchPhoneNum">
                                <label class="phoneErrSp none" for="searchPhoneNum" id="inPhoneErr">
                                    <span class="phoneErr">请输入正确的手机号码</span>
                                    <label class="phoneLbl"></label>
                                </label>
                            </dd>
                        </dl>
                        <dl class="list clearfix">
                            <dt class="list_tit">验证码</dt>
                            <dd class="list_con listYzm">
                                <input type="text" class="input02 inputShort" id="scheckNum">
                                <img src="images/ImageCodeHandler.aspx.png" class="checkCodeImg" id="showCodeImg">
                                <span class="yzmErr none" id="CodeImgErr">验证码错误</span>
                            </dd>
                        </dl>
                        <dl class="list_btn_search clearfix">
                            <dt class="list_tit"></dt>
                            <dd class="list_con"><input type="button" value="免费发送下载地址到手机" class="down_btn"
                                                        href="javascript:void(0);" id="searchClint"></dd>
                        </dl>
                        <dl class="list download_list01 clearfix">
                            <dt class="list_tit">直接下载</dt>
                            <dd class="list_con">
                                <a href="2" class="iphone">iPhone</a>
                                <a href="" class="android">Android</a>
                                <a target="_blank" href="" class="winphone">WP</a>
                            </dd>

                        </dl>


                    </div>

                </div>

            </div>
            <div style="display: none;" class="js-searchbox-panel" id="js_searchbox_package"></div>
            <div style="display: none;" class="js-searchbox-panel" id="js_searchbox_piao">
                <div>3</div>
            </div>
            <div style="display: none;" class="js-searchbox-panel e_csh_sch_cheche" id="js_searchbox_car">
                <div>4</div>
            </div>
            <div class="js-searchbox-panel e_csh_sch_mb js-transition-before js-transition-after"
                 id="js_searchbox_mobile">
            </div>
        </div>

    </div>
</div>
<script>
    let vue = new Vue({
        el: "#js_searchbox",
        data() {
            return {
                themes: [],
                boombox: [],
                tabPosition: 'bottom',
                tabPositionLeft: 'left',
                currentPage: 3,
                pageSize: 3,
                isShow1: false,
                isShow2: false,
                // isShow3: false,
                books: [],
            };
        },
        created: function () {//页面初始化时，需要执行的业务可以放入该方法
            //调用加载数据方法
            this.scenic(-10);
            this.addtheme();
        },

        methods: {
            addtheme() {
                var _this = this;
                axios.post('/theme/queryPage',
                    {"pageNo": 1, "pageSize": 6}
                )//请求参数
                    .then(function (response) {//回调函数
                        if (response.data.code == 200) {
                            //这里面直接写this相当于axios对象 不是vue
                            // this.tableData = response.data.data.list; //错误的
                            _this.themes = response.data.data.list;
                            //console.log(_this.themes);

                        }
                    })
                    .catch(function (error) {//异常处理
                        console.log(error);
                    });
                axios.post('/scenic/queryPage',
                    {"pageNo": 1, "pageSize": 6}
                )//请求参数
                    .then(function (response) {//回调函数
                        if (response.data.code == 200) {
                            //这里面直接写this相当于axios对象 不是vue
                            // this.tableData = response.data.data.list; //错误的
                            _this.books = response.data.data.list;
                            //console.log(_this.books);

                        }
                    })
                    .catch(function (error) {//异常处理
                        console.log(error);
                    });
            },
            scenic(cid) {
                if (cid == -10) {
                    this.isShow1 = true;
                    this.isShow2 = false;
                    // this.isShow3 = false;
                } else {
                    this.isShow1 = false;
                    this.isShow2 = true;
                    //this.isShow3 = false;
                }
                var _this = this;
                axios.post('/scenic/queryPage',
                    {"pageNo": 1, "pageSize": 3, "data": {"themecode": cid}}
                )//请求参数  json格式
                    .then(function (response) {//回调函数
                        //前端控制台打印  response 是json对象
                        //console.log(response);
                        //console.log(JSON.stringify(response));
                        //response获取后台数据时，一定加data  response.data相当于从响应的body中获取
                        if (response.data.code == 200) {
                            //这里面直接写this相当于axios对象 不是vue
                            // this.tableData = response.data.data.list; //错误的
                            _this.boombox = response.data.data.list;
                            console.log(_this.boombox);

                        }
                    })
                    .catch(function (error) {//异常处理
                        console.log(error);
                    });
            }
        }
    });


</script>
<script src="/html/lvyoule_11_10/dingpiao/css/head.js"></script>
<script>tabqiehuan("js_nva_cgy", "li", "cur", "content", "div")</script>
</body>
</html>
